<template>
  <div class="app-container home">
    <div id="map"></div>
  </div>
</template>
  
<script setup name="Index">
const version = ref("3.8.8");
import "ol/ol.css"; // ol提供的css样式（必须引入）
import Map from "ol/Map.js";
import OSM from "ol/source/OSM.js";

import TileWMS from "ol/source/TileWMS.js";
import View from "ol/View.js";
import { TileArcGISRest, XYZ, ImageTile } from "ol/source.js";

import { bbox as bboxStrategy } from "ol/loadingstrategy.js";
import VectorSource from "ol/source/Vector.js";
import { fromLonLat } from "ol/proj";
import { GeoJSON, WFS } from "ol/format.js";
import { Stroke, Style, Fill } from "ol/style.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import {
  and as andFilter,
  equalTo as equalToFilter,
  like as likeFilter,
} from "ol/format/filter.js";
import Circle from 'ol/geom/Circle.js';
import Feature from 'ol/Feature.js';
// import {bbox} from 'ol/loadingstrategy';

import { listwfs } from "@/api/postmap/apiwfs.js";

function initMap() {
  var wmsSource = new TileWMS({
    url: "http://localhost:8080/postmap/wms",
    params: { LAYERS: "geo_hl07_line", TILED: true },
    serverType: "geoserver",
    // Countries have transparency, so do not fade tiles:
    transition: 0,
  });

  const layers = [
    new TileLayer({
      id: "ditu-1",
      source: new XYZ({
        url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
        crossOrigin: "anonymous",
        wrapX: false,
      }),
    }),

    // new TileLayer({
    //   extent: [-13884991, 2870341, -7455066, 6338219],
    //   source: new TileWMS({
    //     url: "https://ahocevar.com/geoserver/wms",
    //     params: { LAYERS: "topp:states", TILED: true },
    //     serverType: "geoserver",
    //     // Countries have transparency, so do not fade tiles:
    //     transition: 0,
    //   }),
    // }),
    // new TileLayer({
    //   //extent: [-13884991, 2870341, -7455066, 6338219],
    //   source: wmsSource,
    // }),
    // vectorwfs,
  ];
  var view = new View({
    // center: [-10997148, 4569099],
    center: fromLonLat([108.0, 34]), // 经度 10.10, 纬度 15.0
    zoom: 10,
  });
  const map = new Map({
    layers: layers,
    target: "map",
    view: view,
  });

  const vectorSourcewfs = new VectorSource({
    format: new GeoJSON(),
    url: function (extent) {
      return (
        "http://localhost:8888/postmap/wfs?service=WFS&" +
        "version=1.1.0&request=GetFeature&typename=osm:water_areas&" +
        "outputFormat=application/json&srsname=EPSG:3857&" +
        "BBOX=" +
        extent.join(",")
      );
    },
    strategy: bboxStrategy,
    zIndex: 1,
  });
  vectorSourcewfs.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));

  vectorSourcewfs.forEachFeature((res) => {
    console.info(res);
  });
  const vectorwfs = new VectorLayer({
    source: vectorSourcewfs,
    style: new Style({
        stroke: new Stroke({
            color: 'blue',
            width: 2
        }),
        fill: new Fill({
            color: 'rgba(255, 0, 0, 0.5)'
        })
    }) 
  });
  map.addLayer(vectorwfs);
  vectorSourcewfs.on("featuresloadend", (res) => {
    console.info("featuresloadend");
    console.info(vectorSourcewfs.getExtent());
    console.info(vectorSourcewfs.getFeatures().length);
    // 获取 layer1 图层的范围
    var extent = vectorwfs.getSource().getExtent();

    
    // vectorSourcewfs.refresh();
    // 调整视图以适应图层的范围
    // map.getView().fit(extent, {
    //   size: map.getSize(), // 设置视图大小为当前地图的显示区域大小
    //   padding: [20, 20, 20, 20], // 可选，设置视图边缘的间距（单位为像素）
    // });

  
  });

  // listwfs("").then((res) => {
  //   console.info("load", res);
  //   const vectorSource = new VectorSource({
  //     features: new GeoJSON().readFeatures(res),
  //   });

  //   // vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));

  //   const vectorLayer = new VectorLayer({
  //     source: vectorSource,
  //     // style: styleFunction,
  //   });
  //   // map.addLayer(vectorLayer);
  // });



  // var ddd = new VectorLayer({
  //   source: new VectorSource({
  //     // format: new WFS(),
  //     format: new GeoJSON(),
  //     url: function (extent) {
  //       return (
  //         "http://localhost:8080/postmap/wfs?service=WFS&" +
  //         "version=1.1.0&request=GetFeature&typename=osm:water_areas&" +
  //         "outputFormat=application/json&srsname=EPSG:3857&" +
  //         "BBOX=" +
  //         extent.join(",")
  //       );
  //     },
  //     strategy: bboxStrategy, // 定义加载策略，支持按需加载
  //   }),
  // });
  // map.addLayer(ddd);
  map.on("singleclick", function (evt) {
    // document.getElementById("info").innerHTML = "";
    const viewResolution = view.getResolution();
    const url = wmsSource.getFeatureInfoUrl(
      evt.coordinate,
      viewResolution,
      "EPSG:3857",
      { INFO_FORMAT: "text/html" }
    );
    if (url) {
      fetch(url)
        .then((response) => response.text())
        .then((html) => {
          // document.getElementById("info").innerHTML = html;

          console.info(html);
        });
    }
  });
}
onMounted(() => {
  initMap();
  //不要在这写Bus.on，在busEventsDict中增加！！！！！！！！！！
});
</script>
  
<style scoped lang="scss">
#map {
  width: 1600px;
  height: 1000px;
}

* {
  stroke: #333333, symbol("shape://vertline");
  stroke-width: 3px;
  :nth-stroke(2) {
    size: 12;
    stroke: #333333;
    stroke-width: 1px;
  }
}
</style>
  
  